<template>
  <div class="login-isolated">
    <div class="container">
      <div class="screen">
        <div class="screen__content">
          <form class="login" ref="formRef" :model="form" :rules="rules">
            <h2>管理员登录</h2>
            <div class="login__field" prop="username">
              用户名：<input type="text" class="login__input" placeholder="请输入您的用户名" v-model="form.username">
              <p v-if="errors.username" class="error-message">{{ errors.username }}</p>
            </div>
            <div class="login__field" prop="password">
              密&nbsp;&nbsp;&nbsp;码：<input type="password" class="login__input" placeholder="请输入您的密码" v-model="form.password">
              <p v-if="errors.password" class="error-message">{{ errors.password }}</p>
            </div>

            <button class="button login__submit" @click="handlelogin" :disabled="isLoading" >
              <span class="button__text" style="text-align: center;">登录</span>
            </button>

            <p v-if="loginError" class="error-message">{{ loginError }}</p>
          </form>
        </div>
        <div class="screen__background">
          <span class="screen__background__shape screen__background__shape4"></span>
          <span class="screen__background__shape screen__background__shape3"></span>
          <span class="screen__background__shape screen__background__shape2"></span>
          <span class="screen__background__shape screen__background__shape1"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import md5 from 'js-md5'
import { login } from '@/api/login.js'
import { ElMessage } from 'element-plus'

const router = useRouter()
const isLoading = ref(false)
const formRef = ref(null)
const loginError = ref('')


const form = ref({
  username: '',
  password: ''
})


const errors = ref({
  username: '',
  password: ''
})


const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})



const handlelogin = async () => {

  errors.value = { username: '', password: '' }
  loginError.value = ''

  if (!form.value.username) {
    errors.value.username = '请输入用户名'
    return
  }
  if (!form.value.password) {
    errors.value.password = '请输入密码'
    return
  }

  try {
      isLoading.value = true
      const encryptedPassword = md5(form.value.password)

      const response = await login({
        username: form.value.username,
        password: encryptedPassword
      })

      if (response.status === 1 && response.content === 'success') {

        localStorage.setItem('token', response.data.satoken || '')

        const userData =
            {
          username: response.data.username || form.value.username,
          lastLoginTime: new Date().toLocaleString()
            }
        localStorage.setItem('userInfo', JSON.stringify(userData))
        ElMessage.success('登录成功')
        router.push('/Students')
      }
      else
      {
        loginError.value = response.message || '登录失败，请检查账号密码'
      }
  }
  catch (error)
  {
    loginError.value = '用户名或密码错误'
  }
  finally
    {
      isLoading.value = false
    }
}

</script>

<style scoped>

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Raleway, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.login-isolated {
  display: flex;
  position: relative;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.container {
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 16px);
  width: 100%;
}

.screen {
  background: linear-gradient(90deg, #5D54A4, #7C78B8);
  position: relative;
  height: 600px;
  width: 360px;
  box-shadow: 0px 0px 24px #5C5696;
}

.screen__content {
  z-index: 1;
  position: relative;
  height: 100%;
}

.screen__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.screen__background__shape {
  transform: rotate(45deg);
  position: absolute;
}

.screen__background__shape1 {
  height: 520px;
  width: 520px;
  background: #FFF;
  top: -50px;
  right: 120px;
  border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
  height: 220px;
  width: 220px;
  background: #6C63AC;
  top: -172px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape3 {
  height: 540px;
  width: 190px;
  background: linear-gradient(270deg, #5D54A4, #6A679E);
  top: -24px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape4 {
  height: 400px;
  width: 200px;
  background: #7E7BB9;
  top: 420px;
  right: 50px;
  border-radius: 60px;
}

.login {
  width: 320px;
  padding: 30px;
  padding-top: 156px;
}

.login__field {
  padding: 20px 0px;
  position: relative;
}

.login__input {
  border: none;
  border-bottom: 2px solid #D1D1D4;
  background: none;
  padding: 10px;
  padding-left: 24px;
  font-weight: 700;
  width: 75%;
  transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
  outline: none;
  border-bottom-color: #6A679E;
}

.login__submit {
  background: #fff;
  font-size: 14px;
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 26px;
  border: 1px solid #D4D3E8;
  text-transform: uppercase;
  font-weight: 700;


  width: 100%;
  color: #4C489D;
  box-shadow: 0px 2px 2px #5C5696;
  cursor: pointer;
  transition: .2s;
  text-align: center;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
  border-color: #6A679E;
  outline: none;
}


.error-message {
  color: #f67879;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 80px;
}


.user-info h2 {
  margin-bottom: 20px;
}

.user-info p {
  margin-bottom: 30px;
  color: #666;
}

</style>